﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        .mainForm {
            border: 1px solid #1d1a1a;
            position: relative;
        }

        .childDiv {
            border: 1px solid #1d1a1a;
            background-color: #ebe3e3;
            float: left;
            cursor: pointer;
        }

        .on {
            background-color: #00ff90;
        }

        .ray {
            background-color: #ff0000;
        }
    </style>
    <script type="text/javascript">
        var rayList = new Array();
        var level = 200, w = level, h = level, o = 20, all = (w / o) * (h / o);
        var isover = false;

        $(document).ready(function () {
            InitMainForm();

            $("#levelList").change(function () {
                level = parseInt($("#levelList").val());
                w = level, h = level, o = 20, all = (w / o) * (h / o);
                InitMainForm();
            });

            $("#mainForm").delegate(".childDiv", "click", function () {
                if (isover) return;
                var ray = parseInt($(this).attr("data-value"));
                if (rayList.indexOf(ray) > 0) {
                    $(this).addClass("ray");
                    isover = true;
                } else {
                    $(this).addClass("on");
                }
            });

        });

        function InitRay() {
            for (var i = 0; i < (all / 10) ; i++) {
                rayList.push(Math.floor(Math.random() * all + 1));
            }
        }

        function InitMainForm() {
            isover = false;
            $("#mainForm").html("");
            $("#mainForm").width(w + ((w / o) * 2)).height(h + ((h / o) * 2));
            for (var i = 0; i < all ; i++) {
                $("<div style=\"width:" + o + "px;height:" + o + "px;\" class=\"childDiv\" data-value=\"" + (i + 1) + "\"></div>").appendTo($("#mainForm"));
            }
            InitRay();
        }
    </script>
</head>
<body>
    <select id="levelList">
        <option value="200">初级</option>
        <option value="400">中级</option>
        <option value="600">高级</option>
    </select>
    <div class="mainForm" id="mainForm"></div>
</body>
</html>
